<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="1">
        <base-info ref="refBase" :is-detail="!!isDetail" :pic-config-id="picConfigId" :patrol-id="detailData.id" :shop-code="detailData.shopCode" />
      </el-tab-pane>
      <el-tab-pane :disabled="!detailData.id" lazy label="走访图片" name="2">
        <patrol-pic ref="refPatrolPic" :is-detail="!!isDetail" :pic-config-id="keyShopCongifId" :patrol-id="detailData.id" />
      </el-tab-pane>
      <el-tab-pane :disabled="!detailData.id" lazy label="走访问题" name="3">
        <patrol-question ref="refProblem" :is-detail="!!isDetail" :schedule="detailData.schedule" :config-id-after="configIdAfter" :config-id-before="configIdBefore" :disabled="!detailData.id" :patrol-id="detailData.id" />
      </el-tab-pane>
      <el-tab-pane :disabled="!detailData.id" lazy label="人员评价" name="4">
        <person-evaluate :is-detail="!!isDetail" :shop-code="detailData.shopCode" :patrol-id="detailData.id" />
      </el-tab-pane>
      <el-tab-pane :disabled="!detailData.id" lazy label="店面评分" name="5">
        <shop-evaluate ref="refShopEvaluate" :is-detail="!!isDetail" :shop-area="detailData.shopArea" :shop-code="detailData.shopCode" :patrol-id="detailData.id" />
      </el-tab-pane>
      <el-tab-pane :disabled="!detailData.id" lazy label="异常反馈" name="6">
        <exception-feedback ref="refExceptionFeedback" :is-detail="!!isDetail" :shop-code="detailData.shopCode" :patrol-id="detailData.id" />
      </el-tab-pane>
      <el-tab-pane :disabled="!detailData.id" lazy label="专项" name="7">
        <special-item ref="refSpecialItem" :is-detail="!!isDetail" :shop-code="detailData.shopCode" :patrol-id="detailData.id" />
      </el-tab-pane>
    </el-tabs>
    <div v-if="!isDetail" class="footer-btn">
      <el-button size="mini" @click.native="handleBack">返回</el-button>
      <el-button v-show="!'34'.includes(activeName)" :loading="saveLoading" type="primary" size="mini" @click="handelSave(0)">保存 </el-button>
      <el-button v-show="activeName==='7'" :loading="saveLoading" type="warning" size="mini" @click="handelSave(1)">提交 </el-button>
      <el-button v-show="activeName!=='1'" :disabled="saveLoading" size="mini" @click="handelPre">上一步 </el-button>
      <el-button v-show="activeName!=='7'&&detailData.id||activeName==='1'" :disabled="saveLoading" type="primary" size="mini" @click="handelNext">下一步 </el-button>
    </div>
    <div v-if="pageType=== '2'&& isDetail" class="footer-btn">
      <el-button size="mini" @click.native="handleBack">返回</el-button>
      <el-button v-show="activeName==='7'" :loading="saveLoading" type="warning" size="mini" @click="handelSave(1)">提交 </el-button>
      <el-button v-show="activeName!=='1'" :disabled="saveLoading" size="mini" @click="handelPre">上一步 </el-button>
      <el-button v-show="activeName!=='7'&&detailData.id||activeName==='1'" :disabled="saveLoading" type="primary" size="mini" @click="handelNextAudit()">下一步 </el-button>
    </div>
  </div>
</template>
<script>
import {
  saveDailyPatrol,
  postConfigAttachmentTemplate,
  saveDailyPatrolFile,
  saveAbnormalFeedback,
  submitAudit,
  saveAudit// 最后审核
} from '@/api/marketService/dailyPatrol'
import BaseInfo from './components/BaseInfo.vue'
import PatrolPic from './components/PatrolPic.vue'
import PatrolQuestion from './components/PatrolQuestion.vue'
import PersonEvaluate from './components/PersonEvaluate.vue'
import ShopEvaluate from './components/ShopEvaluate.vue'
import ExceptionFeedback from './components/ExceptionFeedback.vue'
import SpecialItem from './components/SpecialItem.vue'
export default {
  name: 'DailyPatrolEdit',
  components: { BaseInfo, PatrolPic, PatrolQuestion, PersonEvaluate, ShopEvaluate, ExceptionFeedback, SpecialItem },
  props: {},
  data() {
    return {
      activeName: '1',
      saveLoading: false,
      pageType: '',
      keyShopCongifId: '',
      picConfigId: '',
      configIdAfter: '',
      configIdBefore: '',
      isDetail: 0,
      detailData: {}
    }
  },
  created() {
    const { id, shopCode, schedule, shopArea, isDetail, type } = this.$route.query
    this.detailData = { id, shopCode, schedule, shopArea, type }
    this.isDetail = Number(isDetail || 0)
    this.pageType = type
    postConfigAttachmentTemplate().then(res => {
      if (res.success && res.data.records) {
      // 根据belongModel获取每个配置id
        const tempArr = res.data.records.filter(el => el.enable === 1)
        tempArr.map(el => {
          if (el.attachmentType === '卖场重点区域图片') this.keyShopCongifId = el.id
          if (el.attachmentType === '参与人合照') this.picConfigId = el.id
          if (el.attachmentType === '整改前') this.configIdBefore = el.id
          if (el.attachmentType === '整改后') this.configIdAfter = el.id
        })
      }
    })
  },
  methods: {
    handleBack() {
      this.$store.dispatch('views/goBack')
    },
    handleClick(data) {
      console.log(data, this.activeName)
    },
    handelPre() {
      this.activeName = String(Number(this.activeName) - 1)
    },
    handelNext() {
      this.handelSave()
      this.activeName = String(Number(this.activeName) + 1)
    },
    handelNextAudit() {
      this.activeName = String(Number(this.activeName) + 1)
    },
    async handelSave(type = 0) {
      if (this.activeName === '1') {
        const baseData = await this.$refs.refBase.getData()
        this.saveLoading = true
        saveDailyPatrol(baseData).then(res => {
          if (res.success) {
            this.detailData.id = res.msg || this.detailData.id
            this.detailData.shopArea = baseData.operateArea
            this.$message.success('保存成功')
          }
          this.saveLoading = false
        })
      } else if (this.activeName === '2') {
        const otherFiles = this.$refs.refPatrolPic.getData()
        if (otherFiles.length) {
          this.saveLoading = true
          saveDailyPatrolFile(otherFiles).then(res => {
            if (res.success) this.$message.success('保存成功')
            this.saveLoading = false
          })
        }
      } else if (this.activeName === '5') {
        this.saveLoading = true
        this.$refs.refShopEvaluate.saveData().then(() => {
          this.saveLoading = false
        }).catch(() => {
          this.saveLoading = false
        })
      } else if (this.activeName === '6') {
        const data = this.$refs.refExceptionFeedback.getData()
        if (data) {
          this.saveLoading = true
          saveAbnormalFeedback(this.detailData.id, data || '').then(res => {
            if (res.success) this.$message.success('保存成功')
          })
          this.saveLoading = false
        }
      } else if (this.activeName === '7') {
        const { editForm, files } = this.$refs.refSpecialItem.getData()
        if (files && files.length) {
          saveDailyPatrolFile(files).then(res => {
            if (res.success) this.$message.success('附件保存成功')
          })
        }
        if (type === 1 && this.$route.query.type !== '2') { // 提交
          this.saveLoading = true
          submitAudit({ ...editForm, id: this.detailData.id }).then(res => {
            if (res.success) {
              this.$message.success('提交成功')
              this.$store.dispatch('views/goBack')
            }
            this.saveLoading = false
          }).catch(() => {
            this.saveLoading = false
          })
        } else if (type === 1 && this.$route.query.type === '2') {
          this.saveLoading = true
          saveAudit({ ...editForm, id: this.detailData.id }).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$store.dispatch('views/goBack')
              this.$emit('success')
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.footer-btn{
      position: fixed;
      left: 0;
      right: 2px;
      bottom: 0;
      padding: 10px;
      margin-top: 20px;
      border-top: 1px solid #eee;
      background-color: #fff;
      z-index: 9;
      box-shadow:0 0 4px #eee;
      text-align: center;
      .el-button+.el-button{
        margin-left: 20px;
      }
    }
</style>
